<template>
  <view class="chat-page">
    <!-- 顶部导航栏 - 固定顶部 -->
    <view class="nav-bar">
      <view class="back-btn" @click="handleNavigateBack">
        <image class="back-icon" src="/static/icons/left.png"></image>
      </view>
      <text class="page-title">AI客服</text>
    </view>

    <!-- 聊天内容区 - 支持滚动，避开导航栏和输入栏 -->
    <view class="chat-content">
      <!-- 初始欢迎消息（仅首次进入显示） -->
      <view v-if="chatList.length === 0" class="welcome-message">
        <text class="welcome-text">您好！我是招聘软件AI客服，有什么问题可以随时问我~</text>
        <text class="welcome-hint">例如：如何注册账号、怎么搜索岗位、忘记密码怎么办</text>
      </view>

      <!-- 聊天记录列表（已移除时间显示） -->
      <view 
        class="message-item" 
        :class="{'my-message': item.sendRole === 'me', 'ai-message': item.sendRole === 'ai'}"
        v-for="(item, index) in chatList" 
        :key="index"
      >
        <!-- 我的消息（居右，无时间） -->
        <view class="message-bubble my-bubble" v-if="item.sendRole === 'me'">
          <text class="message-text" v-html="item.content.replace(/\n/g, '<br>')"></text>
          <text class="sender-tag">我</text>
        </view>

        <!-- AI客服消息（居左，无时间） -->
        <view class="message-bubble ai-bubble" v-if="item.sendRole === 'ai'">
          <text class="message-text" v-html="item.content.replace(/\n/g, '<br>')"></text>
          <text class="sender-tag">AI客服</text>
        </view>
      </view>

      <!-- 加载中提示（AI回复生成时显示） -->
      <view class="loading-item" v-if="isLoading">
        <view class="loading-bubble">
          <view class="loading-dot"></view>
          <view class="loading-dot" style="animation-delay: 0.2s"></view>
          <view class="loading-dot" style="animation-delay: 0.4s"></view>
        </view>
      </view>
    </view>

    <!-- 输入栏 - 固定底部 -->
    <view class="input-bar">
      <view class="common-words" @click="openCommonWords">常用问题</view>
      <input 
        class="input-box" 
        type="text" 
        placeholder="请输入您的问题（例如：如何找到心仪的岗位）" 
        v-model="inputValue"
        @confirm="sendMessage" 
      />
      <view class="send-btn" @click="sendMessage" :disabled="isLoading || !inputValue.trim()">
        <image class="send-icon" src="/static/icons/send.png"></image>
        <text class="send-text">发送</text>
      </view>
    </view>
  </view>
</template>

<script>
import { ask, clear } from '@/api/interview.js' // 引入接口方法

export default {
  data() {
    return {
      inputValue: '',        // 输入框内容
      chatList: [],          // 聊天记录列表（无记忆，仅展示历史交互）
      isLoading: false,      // AI回复加载中状态
      // 预设常用问题（匹配后端CommonQuestions，点击直接发送）
      commonQuestions: [
        '如何注册账号',
        '如何修改手机号',
        '如何搜索岗位',
        '如何投递简历',
        '如何查看投递记录',
        '会员有什么权益',
        '如何开通会员'
      ]
    }
  },

  // 页面离开时调用clear接口清除会话
  onUnload() {
    this.clearSession()
  },

  // 监听系统返回按钮（安卓物理返回/顶部返回），离开时清除会话
  onBackPress() {
    this.clearSession()
    return false // 允许默认返回行为
  },

  methods: {
    // 清除会话：调用clear接口
    clearSession() {
      clear({}) // 接口无参数，传空对象即可（根据实际接口调整）
        .then(res => {
          console.log('AI客服会话已清除', res)
        })
        .catch(err => {
          console.error('清除会话失败', err)
        })
    },

    // 返回上一页：先清除会话再返回
    handleNavigateBack() {
      this.clearSession()
      uni.navigateBack()
    },

    // 发送消息：确保ask接口提交格式为 {"question": "用户问题"}
    sendMessage() {
      const question = this.inputValue.trim()
      if (!question || this.isLoading) return // 空内容或加载中不发送

      // 1. 添加用户消息到聊天记录（已移除时间相关字段）
      const userMsg = {
        sendRole: 'me',
        content: question // 仅保留内容和角色，无时间
      }
      this.chatList.push(userMsg)
      this.inputValue = '' // 清空输入框
      this.scrollToBottom() // 滚动到最新消息

      // 2. 调用ask接口：参数严格按 {"question": "内容"} 格式传递
      this.isLoading = true
      const requestData = { question: question } // 符合示例格式（如{"question": "如何找到心仪的岗位"}）
      ask(requestData)
        .then(res => {
          this.isLoading = false
          if (res.code === 200 && res.data) {
            // 3. 添加AI回复到聊天记录（已移除时间相关字段）
            const aiMsg = {
              sendRole: 'ai',
              content: res.data.answer // 仅保留内容和角色，无时间
            }
            this.chatList.push(aiMsg)
            this.scrollToBottom()
          } else {
            // 接口异常时的提示
            this.chatList.push({
              sendRole: 'ai',
              content: '很抱歉，暂时无法为您提供服务，请稍后再试~'
            })
          }
        })
        .catch(err => {
          this.isLoading = false
          console.error('AI客服接口调用失败', err)
          this.chatList.push({
            sendRole: 'ai',
            content: '网络异常，请检查网络后重试~'
          })
          this.scrollToBottom()
        })
    },

    // 打开常用问题列表
    openCommonWords() {
          uni.showActionSheet({
            itemList: this.commonQuestions,
            title: '常用问题',
            success: (res) => {
              // 点击常用问题选项：填充并发送
              this.inputValue = this.commonQuestions[res.tapIndex]
              this.sendMessage()
            },
            fail: (err) => {
              // 关键修复：判断是否为用户主动取消，取消时不打印错误
              if (err.errMsg === 'showActionSheet:fail cancel') {
                console.log('用户取消常用问题选择') // 可选：友好日志，不报错
              } else {
                // 仅非取消的错误才打印（如接口异常、参数错误等）
                console.error('打开常用问题失败', err)
              }
            }
          })
        },

    // 滚动到聊天底部（确保最新消息可见）
    scrollToBottom() {
      setTimeout(() => {
        const query = uni.createSelectorQuery().in(this)
        query.select('.chat-content').boundingClientRect(rect => {
          if (rect) {
            uni.pageScrollTo({
              scrollTop: rect.scrollHeight,
              duration: 100 // 平滑滚动
            })
          }
        }).exec()
      }, 100)
    }
  }
}
</script>

<style scoped>
/* 页面基础布局 */
.chat-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 顶部导航栏 */
.nav-bar {
  display: flex;
  align-items: center;
  height: 44px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  padding: 0 15px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.back-btn {
  width: 20px;
  height: 20px;
}
.back-icon {
  width: 100%;
  height: 100%;
}
.page-title {
  flex: 1;
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  color: #333;
}

/* 聊天内容区（避开导航栏和输入栏） */
.chat-content {
  flex: 1;
  padding: 15px;
  padding-top: 60px; /* 导航栏高度 + 16px间距 */
  padding-bottom: 70px; /* 输入栏高度 + 14px间距 */
  overflow-y: scroll;
  box-sizing: border-box;
}

/* 初始欢迎消息 */
.welcome-message {
  margin-top: 40px;
  text-align: center;
  padding: 0 20px;
}
.welcome-text {
  font-size: 15px;
  color: #333;
  display: block;
  margin-bottom: 10px;
}
.welcome-hint {
  font-size: 12px;
  color: #999;
  line-height: 1.5;
}

/* 聊天记录项 */
.message-item {
  margin-bottom: 18px;
  display: flex;
}

/* 消息气泡通用样式（已移除时间相关样式） */
.message-bubble {
  max-width: 70%; /* 扩大可显示宽度 */
  padding: 12px 15px;
  border-radius: 8px;
  position: relative;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.message-text {
  font-size: 14px;
  line-height: 1.6; /* 优化行高，提升可读性 */
  color: #333;
  word-wrap: break-word; /* 自动换行 */
}
.sender-tag {
  font-size: 10px;
  color: #999;
  position: absolute;
  top: -18px; /* 调整标签位置（因无时间，减少顶部间距） */
}

/* 我的消息（居右） */
.my-message {
  justify-content: flex-end;
}
.my-bubble {
  background-color: #409eff; /* 主色蓝色，区分AI消息 */
}
.my-bubble .message-text {
  color: #fff; /* 白色文字，提升对比度 */
}
.my-bubble .sender-tag {
  right: 0;
  color: #666;
}

/* AI客服消息（居左） */
.ai-message {
  justify-content: flex-start;
}
.ai-bubble {
  background-color: #fff;
  border: 1px solid #eee;
}
.ai-bubble .sender-tag {
  left: 0;
  color: #666;
}

/* 加载中提示 */
.loading-item {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 18px;
}
.loading-bubble {
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 12px 15px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.loading-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #999;
  animation: loading 1.4s infinite ease-in-out both;
}
@keyframes loading {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

/* 底部输入栏 */
.input-bar {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-top: 1px solid #eee;
  padding: 10px 15px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  box-sizing: border-box;
}
.common-words {
  background-color: #e6f3ff;
  color: #409eff;
  padding: 6px 12px;
  border-radius: 20px; /* 圆角优化，更美观 */
  margin-right: 10px;
  font-size: 13px;
  cursor: pointer;
}
.input-box {
  flex: 1;
  height: 40px;
  line-height: 40px;
  background-color: #f8f8f8;
  border-radius: 20px; /* 圆角输入框 */
  padding: 0 18px;
  margin-right: 10px;
  font-size: 14px;
  border: none;
  outline: none;
}
.send-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #409eff;
  color: #fff;
  border-radius: 20px;
  padding: 0 18px;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
}
.send-btn:disabled {
  background-color: #a0cfff; /* 禁用状态颜色 */
  cursor: not-allowed;
}
.send-icon {
  width: 18px;
  height: 18px;
  margin-right: 6px;
}
.send-text {
  font-size: 14px;
  font-weight: 500;
}
</style>